<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册页面</title>
</head>
<style>
    div{
        width:400px;
        height: 600px;
        border :1px solid black;
        background: whitesmoke;
        border-radius: 40px;
        position: relative;
        left: 50px;
    }

    #hello{
        font-size: 30px;
        font-weight: bold;
    }

    p{
        position: relative;
        left: 50px;
    }

    button{
        width: 300px;
        height: 40px;
        background: skyblue;
        position: relative;
        left: 50px;
        top: 30px;
    }

</style>

<body>
    <div>
        <!-- 表单 -->
        <form >
            <p id="hello">欢迎注册</p>
            <p>用户名：
            <!-- 类型是text，添加表单元素事件onblur，当元素失去焦点时执行脚本 -->
                <input type="text" id="username" 
                    placeholder="请输入账号" onblur="checkadmin()">
            </p>
            <p>密码：
                <input type="password" id="password">
            </p>
            <p>性别：
                <!-- 类型是radio，男为已选中 -->
                <input type="radio" name="sex" id="man" checked="checked">男
                <input type="radio" name="sex" id="women">女
            </p>
            <p>学历：
                <!-- 类型为radio，本科为已选中 -->
                <input type="radio" name="education" id="bachelor" checked="checked">本科
                <input type="radio" name="education" id="zhuanke">专科
            </p>
            <p>自我介绍：
                <!-- 类型为textarea -->
                <textarea id="selfinfo" cols="30" rows="5">
                </textarea>
            </p>
        </form>
        <!-- 按钮，添加点击事件 -->
        <button id="submit" onclick="submit()">提交</button>
    </div>

    <script>
        // 执行判断校验用户名的操作
        function checkadmin(){
            // 根据id得到元素的值
            var username = document.getElementById("username").value;
            // 设置正则表达式，admin
            var admin = /^admin$/;
            // 判断，获取判断结果
            var boolean = admin.test(username);
            // 如果结果为false则弹框提示错误
            if(boolean != true) {
                alert("输入用户名错误！请重新输入！");
            }
        }
        // 执行点击事件的操作
        function submit(){
            // 根据id得到元素的值
            var selfinfo = document.getElementById("selfinfo").value;
            // 弹框，显示自我介绍的内容
            alert("自我介绍：" + selfinfo);
        }
    </script>

</body>
</html>